<template>
  <div class="goodsItem" @click="todetail(item.id)">
    <img :src="item.image" alt="" />
    <div>
      <h4>{{ item.store_name }}</h4>
      <p class="price">￥{{ item.price }}</p>
      <div class="vipprice">
        <span class="p">￥{{ item.vip_price }}</span>
        <img src="@/assets/image/vip.png" @error="change1($event)" />
        <span class="buy">已售{{ item.sales }}{{ item.unit_name }}</span>
      </div>
      <div class="cateicon">
        <i class="iconfont icon-gouwuche"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
  },
  methods:{
    todetail(id){
      this.$router.push({path:"/detail",query:{id:id}})
      // console.log(id);
    },
    change1(e){
      e.target.src=require("@/assets/image/error.png")
    },
  }
};
</script>
<style lang="scss" scoped>
.goodsItem {
  display: flex;
  padding: 10px 0;
  
width: 100%;
  img {
    width: 100px;
    height: 100px;
    padding-right: 5px;
  }
  > div {
    width: 70%;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    position: relative;
    h4 {
      width: 100%;
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
    }
  }
  .price {
      font-size: 16px;
      color: #fc4141;
      font-weight: bold;
      margin-top: 35px;
  }
  .vipprice {
      display: flex;
      align-items: center;
      margin-top: 5px;
      
    .p {
        font-size: 12px;
        font-weight: bold;
    }
    img {
        width: 30px;
        height: 25px;       
    }
    .buy {
        font-size: 10px;
        color: #666;
    }
  }
  .cateicon {
      position: absolute;
      right: 0;;bottom: 20px;
    i {
        font-size: 25px;
        color:#9927f7
    }
  }
}
</style>